<template>
    <a-spin :spinning="!load">

        <a-drawer title="详情" placement="right" :closable="false" :visible="show" @close="onClose" width="500">
            <a-descriptions>
                <a-descriptions-item label="Id">
                    {{data.id}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="附件">
                    <a :href="data.fileUrl" target="_blank">{{data.fileUrl}}</a>
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="更新日期">
                    {{data.gmtModify}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="更新者">
                    {{data.modifyUser}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="组织ID">
                    {{data.orgIds}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="组织名称">
                    <span v-for="(item,index) in data?.orgNames" :key="index">
                        <a-tag color="pink"> {{item}} </a-tag>
                    </span>
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="表格名称">
                    {{data.tableName}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="表格状态">
                    {{statusList.find(x=>x.value ===data?.tableStatus)?.name}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="表格描述">
                    {{data.tableTitle}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="表格类型">
                    {{data.tableType}}
                </a-descriptions-item>
            </a-descriptions>
            <a-descriptions>
                <a-descriptions-item label="分区信息">
                    <div v-if="data.zoneDTOList">
                        <a-table :columns="columns" :data-source="data.zoneDTOList" size="small"
                            style="margin-top: 20px;" v-if="data.zoneDTOList.length" :pagination="false">
                            <template slot="questionDTOList" slot-scope="record">
                                <a-space direction="vertical">
                                    <div v-for="(item,index) in record" :key="index">
                                        <a-tag color="#f00"> {{item.questionTitle}}</a-tag>
                                    </div>
                                </a-space>
                            </template>
                        </a-table>
                    </div>
                </a-descriptions-item>
            </a-descriptions>
            <div :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }">
                <a-button type="primary" @click="show = false">
                    关闭
                </a-button>
            </div>
        </a-drawer>
    </a-spin>
</template>
<script>
    // import { message } from 'ant-design-vue';
    // import { getTableDetail } from "@/services"
    export default {
        props: {
            // 组织列表
            orgList: {
                default: () => { },
                type: Array,
            },
            // 状态列表
            statusList: {
                default: () => { },
                type: Array,
            },
        },
        data() {
            return {
                // 是否显示
                show: false,
                // 父级数据
                parent: {},
                // 数据
                data: {},
                // 加载状态
                load: true,
                // 分区结构
                columns: [
                    {
                        title: 'ID',
                        dataIndex: 'id',
                        key: 'id',
                        width: '15%'
                    },
                    {
                        title: '分区名称',
                        dataIndex: 'zoneName',
                        key: 'zoneName',
                        width: '20%'
                    },
                    {
                        title: '问题选项',
                        dataIndex: 'questionDTOList',
                        key: 'questionDTOList',
                        scopedSlots: { customRender: 'questionDTOList' },
                    },
                ],
            }
        },
        methods: {
            /**
             * 打开抽屉
             */
            async open(e) {
                this.data = e
                this.show = true
            },
            onClose() {
                this.show = false;
            },

        },
    }
</script>